<template>
  <div class="order-search-table">
    <a-table :columns="columnsParent" :data-source="dataParent" :scroll="{ x: 1500 , y: 500}" size="small" class="table" :pagination="pagination">
      <a-table 
        :columns="columns" 
        slot-scope="text, index"
        :data-source="dataParent[index].value" 
        size="small"
        slot="expandedRowRender"
        :pagination="false"
        >
        <template slot="po" slot-scope="text, record">
          <span class="go-mod" @click="modifyOrder(record)">{{text}}</span>
        </template>
        <template slot="goodsNumber" slot-scope="text, record">
          <span class="go-mod" @click="modifyOrder(record)">{{text}}</span>
        </template>
        <template slot="remark" slot-scope="text, record">
          <span class="go-mod" @click="modifyOrder(record)">{{text}}</span>
        </template>
        <template slot="operation" slot-scope="text, record">
          <a-button size="small" @click="modifyOrder(record)" :type="record.deliveryId?'primary':''">
            修改
          </a-button>
          <a-popconfirm
            :title="`确认删除订单${record.key}`"
            ok-text="Yes"
            cancel-text="No"
            :disabled="record.deliveryId"
            @confirm="deleteOrder(record)"
          >
            <a-button size="small" type="danger" style="margin-left: 12px;" :disabled="record.deliveryId">
              删除
            </a-button>
          </a-popconfirm>
        </template>
      </a-table>
    </a-table>
  </div>
</template>

<script>
import {
  orderSearchColumns,
  orderSearchColumnsParent
} from './init/tableInit.js';

import {
  orderDelReq
} from '@/requests/orderRequests.js';

import {
  divide3Float3Fixed
} from '@/utils/NumberChange.js';

import {
  generateFilters,
  getNameById,
  reduceOrders
} from '@/utils/commonFunc.js';

export default {
  name: "OrderSearchTable",
  props: {

  },
  data() {
    return {
      data: [],
      columns: orderSearchColumns,
      columnsParent: orderSearchColumnsParent,
      dataParent: [],
      pagination: {
        pageSize: 50,//每页中显示20条数据
        showSizeChanger: true,
        pageSizeOptions: ["10", "20", "50", "100"],//每页中显示的数据
        showTotal: total => `共有 ${total} 条订单`,  //分页中显示总的数据
      }
    };
  },
  computed: {

  },
  mounted() {
    this.updateOrders();
  },
  watch: {
    '$store.state.ordersCache' () {
      this.updateOrders();
    }
  },
  methods: {
    modifyOrder(record) {
      this.$router.push({
        name: 'OrderCheck',
        params: {
          id: record.key
        },
      })
    },
    deleteOrder(record) {
      const orderId = record.key;
      // 通知后端进行删除order的操作
      const loaded = this.$message.loading('正在删除订单，请勿重复点击删除', 0);
      orderDelReq(orderId).then((res) => {
        loaded();
        // 如果成功，啥东西都不返回。
        // 提示父组件刷新页面数据
        this.$emit('deleteOrder', orderId);

        // 弹出删除订单成功提示框
        this.$notification['success']({
          message: '删除订单',
          description:
            `删除订单成功，被删除的订单ID ${orderId}`,
        });

        // 更新Order列表缓存
        this.$store.commit('updateOrdersCache');
      }).catch((err) => {
        loaded();
        this.$notification['error']({
          message: '删除订单',
          description:
            `删除订单失败，该订单已在送货单内，请点击修改查看订单所在送货单，删除送货单后才能删除该订单`,
        });
      });
    },
    /**
     * 更新orders，数据更新或第一次加载
     */
    updateOrders() {
      const orders = this.$store.state.ordersCache.map((value) => {
        const order = Object.assign({}, value);
        order.key = order.id;
        order.clientId = getNameById(this.$store.state.clientsCache, order.clientId);
        order.price = divide3Float3Fixed(order.price);
        order.amount = divide3Float3Fixed(order.amount);
        return order;
      });
      this.data = orders;
      this.dataParent = (reduceOrders(orders));
      // this.columns[0].filters = generateFilters(orders, 'clientId');
    }
  },
  components: {

  },
};
</script>

<style scoped lang="scss">
.order-search-table {
  >.table {
    width: calc(100vw - 350px);
    .go-mod {
      display: inline-block;
      width: 100%;
      transition: .25s ease-in;
      &:hover {
        cursor: pointer;
        background: rgb(218, 255, 255);
      }
    }
  }
}
</style>
<style lang="scss">
.order-search-table {
  // >.table {
    
  //   .ant-table-header {
  //     min-width: auto !important;
  //   }

  //   .ant-table-row:hover {
  //     cursor: pointer;
  //   }
  // }
}
</style>
